import React, { Component } from 'react';
import '../css/App.css';
import { connect } from "react-redux";

class App extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        console.log(this.props.list);
        return (
            <div className="App">
                <header>
                    <input type="text" ref="input" />
                    <button onClick={() => {
                        var value = this.refs.input.value;
                        if (value === '') {
                            alert("添加的内容不能为空！");
                            return;
                        }
                        //组装todo对象
                        var todo = {
                            context: value,
                            status: "item"
                        }
                        this.props.addTodo({
                            type: "Add",
                            todo: todo
                        });
                    }}>添加todo</button>
                </header>
                <div className="box">
                    {
                        this.props.list.map((item, index) => {
                            return <p key={index}>
                                <input type="checkbox"
                                    checked={item.status === "Doing" ? false : true}
                                    onChange={(event) => {
                                        var checked = event.target.checked;
                                        this.props.changeStatus({
                                            type: "changeStatus",
                                            todo: item,
                                            checked: checked
                                        })
                                    }} />
                                <span>{item.context}</span>
                                <b>
                                    <button onClick={() => {
                                        this.props.delOne({
                                            type: "delete",
                                            todo: item
                                        })
                                    }}>删除</button>
                                </b>
                            </p>
                        })
                    }
                </div>
                <div className="foot">
                    <div>
                        <button onClick={() => {
                            this.props.all({
                                type: "all"
                            })
                        }}>全部</button>
                    </div>
                    <div>
                        <button onClick={() => {
                            this.props.showDoing({
                                type: "doing"
                            })
                        }}>正在进行</button>
                    </div>
                    <div>
                        <button onClick={() => {
                            this.props.showFinished({
                                type: "showFinish"
                            })
                        }}>已完成</button>
                    </div>
                    <div>
                        <button onClick={()=>{
                            this.props.delAll({
                                type:'delAllMsg'
                            })
                        }}>全部删除</button>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(rootReducer) {
    console.log(rootReducer.todoReducer.list)
    return {
        list: rootReducer.todoReducer.copyList
    }
}

function mapActionToProps(dispatch) {
    return {
        addTodo: (action) => { dispatch(action) },
        changeStatus: (action) => { dispatch(action) },
        all: (action) => { dispatch(action) },
        showDoing: (action) => { dispatch(action) },
        showFinished: (action) => { dispatch(action) },
        delOne: (action) => { dispatch(action) },
        delAll:(action)=>{dispatch(action)}
    }
}
export default connect(mapStateToProps, mapActionToProps)(App);
